<template>
	<view class="container">
		<uni-card>
			<view slot="title" class="card-title">
				<view>
					<uni-icons type="star" size="14" color="#dd794b"></uni-icons>
				</view>
				<view style="margin-left: 6px;">
					物品信息
				</view>
			</view>
			<view class="group_item">
				<view class="group_title">
					物品名称
				</view>
				<view class="picker_class">{{goodsInfo.goodsName}}</view>
			</view>
			<view class="group_item">
				<view class="group_title">
					物品重量
				</view>
				<view class="picker_class">{{goodsInfo.goodsWeight}}kg</view>
			</view>
		</uni-card>
		<uni-card>
			<view slot="title" class="card-title">
				<view>
					<uni-icons type="star" size="14" color="#dd794b"></uni-icons>
				</view>
				<view style="margin-left: 6px;">
					订单信息
				</view>
			</view>
			<view class="group_item">
				<view class="group_title">
					订单类型
				</view>
				<view class="picker_class">{{expressInfo.thirdName}}</view>
			</view>
			<view class="group_item">
				<view class="group_title">
					订单号
				</view>
				<view class="picker_class">{{expressInfo.waybillNo}}</view>
			</view>
			<view class="group_item">
				<view class="group_title">
					订单时间
				</view>
				<view class="picker_class">{{expressInfo.orderTime}}</view>
			</view>
			<view class="group_item">
				<view class="group_title">
					寄件人
				</view>
				<view class="picker_class">{{expressInfo.senderName}}</view>
			</view>
			<view class="group_item">
				<view class="group_title">
					寄件人电话
				</view>
				<view class="picker_class">{{expressInfo.senderPhone}}</view>
			</view>
			<view class="group_item">
				<view class="group_title">
					收件人
				</view>
				<view class="picker_class">{{expressInfo.receiverName}}</view>
			</view>
			<view class="group_item">
				<view class="group_title">
					收件人电话
				</view>
				<view class="picker_class">{{expressInfo.receiverPhone}}</view>
			</view>
			<view class="group_item">
				<view class="group_title">
					收件地址
				</view>
				<view class="picker_class">
					{{expressInfo.receiverProvince + expressInfo.receiverCity + expressInfo.receiverCounty + expressInfo.receiverAddress}}
				</view>
			</view>
			<view class="group_item">
				<view class="group_title">
					预估价格
				</view>
				<view class="picker_class">{{expressInfo.price}}元</view>
			</view>
		</uni-card>
		<uni-card>
			<view slot="title" class="card-title">
				<view>
					<uni-icons type="star" size="14" color="#dd794b"></uni-icons>
				</view>
				<view style="margin-left: 6px;">
					物流信息
				</view>
			</view>
			<view>
				<uni-steps :options="stepOptions" direction="column" :active="stepActive" active-color="#7eb2ff"></uni-steps>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import uniCard from "@/components/uni-card/uni-card.vue"
	import uniSteps from "@/components/uni-steps/uni-steps.vue"
	export default {
		data() {
			return {
				expressId: "",
				goodsInfo: {},
				expressInfo: {},
				logisticsInfo: [],
				stepOptions: [],
				stepActive: 0
			}
		},
		components: {
			uniCard,
			uniSteps
		},
		onLoad(options) {
			if (options && options.id) {
				this.expressId = options.id
			}
			this.initData()
		},
		methods: {
			initData() {
				let params = {
					id: this.expressId
				}
				this.$api.request.queryExpressRecordById(params, res => {
					if (res.code == 200) {
						this.goodsInfo = res.data.expressGoods[0];
						this.expressInfo = res.data
						this.queryLogisticsInfo()
					}
				})
			},
			queryLogisticsInfo() {
				let params = {
					expressType: this.expressInfo.thirdCode,
					orderId: this.expressInfo.orderId,
					waybillNo: this.expressInfo.waybillNo
				}
				this.$api.request.queryLogisticsInfo(params, res => {
					if (res.code == 200) {
						let logisticsInfo = res.data.routes
						this.stepActive = logisticsInfo.length - 1
						for (let i = 0; i < logisticsInfo.length; i++) {
							let route = {
								title: logisticsInfo[i].acceptTime,
								desc: logisticsInfo[i].remark
							}
							this.stepOptions.push(route)
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #FBFBFB;
	}

	.container {
		width: 100%;
		height: 100%;
	}

	.group_item {
		width: 100%;
		display: flex;
		background: red;
		flex-direction: row;
		background-color: white;
		justify-content: space-between;
	}

	.group_title {
		/* width: 100upx; */
		height: 100upx;
		line-height: 100upx;
		font-size: 30upx;
		font-weight: bold;
	}

	.picker_class {
		text-align: right;
		width: 70%;
		height: 100upx;
		line-height: 100upx;
		margin-left: 10upx;
		font-size: 28upx;
		padding-left: 10upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.card-title {
		display: flex;
		flex-direction: row;
		line-height: 80upx;
		border-bottom: 1px solid #edeef0;
		font-weight: bold;
		font-size: 30upx;
	}
</style>
